<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>数据表格</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="static/bootstrap3.3.6/css/bootstrap.min.css" media="all">
  <link rel="stylesheet" href="static/fontawesome/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="static/lib/bootstrap-table.min.css" media="all">
  <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="static/style/admin.css" media="all">
  <link rel="stylesheet" href="static/style/mend.css" media="all">
</head>

<body>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>数据表格</cite></a>
      <a><cite>简单用法</cite></a>
    </div>
  </div>

  <div class="layui-fluid layui-form">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="topbtn btns">
          <button type="button" class="btn btn-primary" id="" name="" onclick="add('供应商注册新增','900','260','add.html');"><i
              class="fa fa-plus"></i>
            新增</button>
          <button type="button" class="btn btn-success" id="" name="" onclick="edit();"><i class="fa fa-pencil"></i>
            修改</button>
          <button type="button" class="btn btn-danger" id="" name="" onclick="del(this);"><i class="fa fa-trash"></i>
            删除</button>
          <button type="button" class="btn btn-warning" id="" name="" onclick="upload(this);"><i class="fa fa-upload"></i>
            导入</button>
          <button type="button" class="btn btn-lightgreen" id="" name="" onclick="download(this);"><i class="fa fa-download"></i>
            导出</button>
          <button type="button" class="btn btn-primary" id="" name="" onclick="quit(this);"><i class="fa fa-power-off"></i>
            退出</button>
          <button type="button" class="btn btn-success" id="" name="" onclick="email(this);"><i class="fa fa-envelope-o fa-fw"></i>
            EMAIL</button>
          <input type="text" class="input-text search" placeholder="搜索">
          <div class="layui-input-inline">
            <input type="checkbox" name="switch" lay-skin="switch">
          </div>
          <div class="filterbox" id="filter">
            <form action="" class="layui-form">
              <div class="layui-form-item">
                <div class="layui-input-inline">
                  <select name="city" lay-search>
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                  </select>
                </div>
                <div class="layui-input-inline">
                  <select name="city" lay-search>
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                  </select>
                </div>
                <div class="layui-input-inline">
                  <select name="city" lay-search>
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                  </select>
                </div>
                <div class="layui-input-inline">
                  <select name="city" lay-search>
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                  </select>
                </div>
                <div class="layui-input-inline"><button type="button" class="layui-btn layui-btn-radius layui-btn-primary">搜索</button></div>

              </div>

            </form>
          </div>
        </div>
        <table class="layui-table table-condensed" id="table" lay-size="sm" style="width:2000px"></table>

      </div>
    </div>
  </div>
  <script src="static/lib/jquery.min.js"></script>
  <script src="static/bootstrap3.3.6/js/bootstrap.min.js"></script>
  <script src="static/lib/bootstrap-table.min.js"></script>
  <script src="static/lib/colResizable-1.6.min.js"></script>
  <!-- <script src="static/lib/bootstrap-table-resizable.min.js"></script> -->
  <script src="static/lib/bootstrap-table-resizable.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js" integrity="sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn7A="
    crossorigin="anonymous"></script>
  <script src="static/lib/jquery-ui.js"></script>
  <script src="static/lib/jquery.dragtable.js"></script>
  <script src="static/lib/bootstrap-table-reorder-columns.js"></script>
  <script src="static/lib/bootstrap-table-editable.min.js"></script>
  <script src="static/layui/layui.js"></script>
  <script src="static/style/mend.js"></script>
  <script>
    $(function () {
      $('#table').bootstrapTable({
        url: 'user.js',
        striped: true, //是否显示行间隔色
        cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true, //是否显示分页（*）
        resizable: true, //可拖动
        // fixed: false,
        resizeMode: 'overflow',
        reorderableColumns: true,
        onReorderColumn: function (res) {
          console.log(res);
        },
        columns: [{
          checkbox: true,
          field: 'checked'
        }, {
          field: 'id',
          title: 'ID',
          sortable: true,
        }, {
          field: 'username',
          title: '用户名',
          sortable: true,
        }, {
          field: 'sex',
          title: '性别',
          sortable: true,
        }, {
          field: 'city',
          title: '城市'
        }, {
          field: 'sign',
          title: '签名'
        }, {
          field: 'experience',
          title: '经验'
        }, {
          field: 'logins',
          title: '登录次数'
        }, {
          field: 'wealth',
          title: '健康'
        }, {
          field: 'classify',
          title: '分类'
        }, {
          field: 'score',
          title: '得分'
        }, {
          field: 'field1',
          title: '字段'
        }, {
          field: 'field2',
          title: '字段'
        }, {
          field: 'field3',
          title: '字段'
        }, {
          field: 'field4',
          title: '字段'
        }, {
          field: 'field5',
          title: '字段'
        }, {
          field: 'field6',
          title: '字段'
        }, {
          field: 'field7',
          title: '字段'
        }, {
          field: 'field8',
          title: '字段'
        }, {
          field: 'field9',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }, {
          field: 'field10',
          title: '字段'
        }]
      });
    })
  </script>
  <script type="text/javascript">
    //编辑项目
    function edit() {
      var id = $('input[name="selectrow"]:checked').val();
      if (id) {
        layer.msg(id);
      } else {
        layer.msg('没有选择项目');
      }
    }
    //项目删除
    function del() {
      var ids = [];
      $('input[name="selectrow"]:checked').each(function () {
        ids.push($(this).val());
      });
      if (ids.length) {
        $.post('delurl', {
          id: ids
        }, function (res) {
          if (res) {
            layer.msg('删除成功');
          }
        });
      } else {
        layer.msg('没有选择项目');
      }
    }
    $(function () {
      layui.use('form', function () {
        var form = layui.form;
        form.on('switch()', function (data) {
          if (data.elem.checked) {
            $('#filter').show();
          } else {
            $('#filter').hide();
          }
        });
      })
    })
  </script>
</body>

</html>